<template>
  <div class="modal" v-if="isShow">
      <div class="mask" @click="closeModal()"></div>
      <div class="layui-layer layui-layer-page info" :class="{active:isShow}">
        <div class="layui-layer-title">签到活跃榜 - TOP 20 <i class="layui-icon layui-icon-close pull-right" @click="closeModal()"></i></div>
        <div class="layui-layer-content pd0">
          <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
              <li :class="{'layui-this': current === 0}" @click="changeTab(0)">最新签到</li>
              <li :class="{'layui-this': current === 1}" @click="changeTab(1)">今日最快</li>
              <li :class="{'layui-this': current === 2}" @click="changeTab(2)">总签到榜</li>
            </ul>
            <div class="layui-tab-content">
              <ul class="layui-tab-item layui-show">
                <li v-for="(item,key) in list" :key="'list'+key">
                  <img src="img/header.jpg" alt="" class="mr1">
                  <cite class="fly-link">{{item.name}}</cite>
                  <span class="fly-grey" v-if="current !== 2">
                    签到于 <i class="orange">{{item.created}}</i>
                  </span>
                  <span class="fly-grey" v-else>已经连续签到 <i class="orange">{{item.count}}</i> 天</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'sign-list',
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      current: 0,
      list: [
        {
          name: 'test1',
          count: 1,
          created: '2019-01-01'
        },
        {
          name: 'test1',
          count: 1,
          created: '2019-01-01'
        },
        {
          name: 'test1',
          count: 1,
          created: '2019-01-01'
        },
        {
          name: 'test1',
          count: 1,
          created: '2019-01-01'
        }
      ]
    }
  },
  methods: {
    closeModal () {
      this.$emit('closeModal')
    },
    changeTab (val) {
      this.current = val
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
